<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔仙个人中心</title>
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/center.css">
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="./login.html">请先登录</a>
        </li>
        <li>
          <a href="./register.html">免费注册</a>
        </li>
        <li>
          <a href="javascript:;">我的订单</a>
        </li>
        <li>
          <a href="javascript:;">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i> 手机版
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 头部 -->
  <div class="xtx_header clearfix">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="javascript:;">首页</a>
          </li>
          <li>
            <a href="javascript:;">生鲜</a>
          </li>
          <li>
            <a href="javascript:;">美食</a>
          </li>
          <li>
            <a href="javascript:;">餐厨</a>
          </li>
          <li>
            <a href="javascript:;">电器</a>
          </li>
          <li>
            <a href="javascript:;">居家</a>
          </li>
          <li>
            <a href="javascript:;">洗护</a>
          </li>
          <li>
            <a href="javascript:;">孕婴</a>
          </li>
          <li>
            <a href="javascript:;">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->
        <a href="javascript:;" class="xtx_search_cart sprites">
          <i>2</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜">
        </div>
      </div>
    </div>
  </div>

  <!-- 内容：待完成 -->
  <div class="xtx_body">
    <div class="wrapper">
      <!-- 侧边栏 -->
      <div class="aside">
        <div class="user">
          <a href="#">
            <img src="./uploads/avatar_1.png" alt="">
          </a>
          <p>张小花</p>
          <a href="#">
            黄金会员
          </a>
        </div>
        <div  class="account">
          <dl>
            <dt>我的账户</dt>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
          </dl>
        </div>
        
        <div class="trade">
          <dl>
            <dt>我的账户</dt>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
          </dl>
        </div>
        <div class="collect">
          <dl>
            <dt>我的账户</dt>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
          </dl>
        </div>
        <div class="help">
          <dl>
            <dt>我的账户</dt>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
            <dd>
              <a href="#">
                <i></i>
                个人中心
              </a>
            </dd>
          </dl>
        </div>
      </div>

      <!-- 主体内容 -->
      <div class="main">

        <!-- 用户账户概览 -->
        <div class="overview">
          <div>
            <a href="#">
              <img src="./images/vip.png" alt="">
              <p>会员中心</p>
            </a>
            <a href="#">
              <img src="./images/vip.png" alt="">
              <p>会员中心</p>
            </a>
            <a href="#">
              <img src="./images/address.png" alt="">
              <p>会员中心</p>
            </a>
          </div>
          <div>
            <a href="#">
              <span>6</span>
              <p>优惠券</p>
            </a>
            <a href="#">
              <span>6</span>
              <p>优惠券</p>
            </a>
            <a href="#">
              <span>6</span>
              <p>优惠券</p>
            </a>
          </div>
        </div>

        <!-- 订单 -->
        <div class="pannel orders">
          <div class="pannel_title">
            <h4>我的订单</h4>
            <a href="#">
              查看全部
              <i class="iconfont icon-more"></i>
            </a>
          </div>

          <div class="content">
            <ul>
              <li>
                <div class="goods">
                  <div class="pic">
                    <a href="#"><img src="./uploads/order_goods_1.jpg" alt=""></a>
                  </div>
                  <div class="txt">
                    <h5>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</h5>
                    <p>颜色：白色 尺码：M 数量：1</p>
                  </div>
                </div>
                <div class="status">待付款</div>
                <div class="pay common">
                  <p>￥99.00</p>
                  <p>（含运费：¥10.00元）</p>
                  <p>在线支付</p>
                </div>
                <div class="action common">
                  <a href="#">立即付款</a>
                  <a href="#">查看详情</a>
                  <a href="#">取消订单</a>
                </div>
              </li>

              <li>
                <div class="goods">
                  <div class="pic">
                    <a href="#"><img src="./uploads/history_goods_2.jpg" alt=""></a>
                  </div>
                  <div class="txt">
                    <h5>李宁跑步鞋男鞋空气弧...</h5>
                    <p>颜色：灰色 尺码：42 数量：1</p>
                  </div>
                </div>
                <div class="status">
                  <p>待收货</p>
                  <p>
                    <a href="#">查看物流</a>
                  </p>
                </div>
                <div class="pay common">
                  <p class="style-red">￥199.00</p>
                  <p>（含运费：¥10.00元）</p>
                  <p>在线支付</p>
                </div>
                <div class="action common">
                  <a href="#">确认收货</a>
                  <a href="#">查看详情</a>
                  <a href="#">再次购买</a>
                </div>
              </li>

            </ul>
          </div>
        </div>

        <!-- 收藏商品 -->
        <div class="pannel orders collect">
          <div class="pannel_title">
            <h4>我的订单</h4>
            <a href="#">
              查看全部
              <i class="iconfont icon-more"></i>
            </a>
          </div>
        
          <div class="content">
            <ul>
              <li>
                <a href="#">
                  <img src="./uploads/collect_goods_1.jpg" alt="">
                  <p>
                    人本秋季厚底帆布鞋 <br>
                    韩版低帮增高学生
                  </p>
                  <p class="style-red">
                    ￥<span>55</span>
                  </p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./uploads/collect_goods_1.jpg" alt="">
                  <p>
                    人本秋季厚底帆布鞋 <br>
                    韩版低帮增高学生
                  </p>
                  <p class="style-red">
                    ￥<span>55</span>
                  </p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./uploads/collect_goods_1.jpg" alt="">
                  <p>
                    人本秋季厚底帆布鞋 <br>
                    韩版低帮增高学生
                  </p>
                  <p class="style-red">
                    ￥<span>55</span>
                  </p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./uploads/collect_goods_1.jpg" alt="">
                  <p>
                    人本秋季厚底帆布鞋 <br>
                    韩版低帮增高学生
                  </p>
                  <p class="style-red">
                    ￥<span>55</span>
                  </p>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 足迹 -->
        <div class="pannel orders collect">
          <div class="pannel_title">
            <h4>我的订单</h4>
            <a href="#">
              查看全部
              <i class="iconfont icon-more"></i>
            </a>
          </div>
        
          <div class="content">
            <ul>
              <li>
                <a href="#">
                  <img src="./uploads/collect_goods_1.jpg" alt="">
                  <p>
                    人本秋季厚底帆布鞋 <br>
                    韩版低帮增高学生
                  </p>
                  <p class="style-red">
                    ￥<span>55</span>
                  </p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./uploads/collect_goods_1.jpg" alt="">
                  <p>
                    人本秋季厚底帆布鞋 <br>
                    韩版低帮增高学生
                  </p>
                  <p class="style-red">
                    ￥<span>55</span>
                  </p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./uploads/collect_goods_1.jpg" alt="">
                  <p>
                    人本秋季厚底帆布鞋 <br>
                    韩版低帮增高学生
                  </p>
                  <p class="style-red">
                    ￥<span>55</span>
                  </p>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="./uploads/collect_goods_1.jpg" alt="">
                  <p>
                    人本秋季厚底帆布鞋 <br>
                    韩版低帮增高学生
                  </p>
                  <p class="style-red">
                    ￥<span>55</span>
                  </p>
                </a>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <!-- 主体内容 -->
    </div>
  </div>
  <!-- 内容 -->


  <!-- 公共底部 -->
  <div class="xtx_footer">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>